<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    CSS transform属性允许对某一个元素进行某些形变,包括旋转，缩放，倾斜或平移等transform是形变的意思，transformer就是变形金刚;
    注意事项，并非所有的盒子都可以进行transform的转换(通常行内级元素不能进行形变)
    所以，transform对于行内级非替换元素是无效的;
    口比如对span、a元素等;

    常见的函数transform function有:
    口平移: translate(x, y)
        口这个CSS函数用于移动元素在平面上的位置
        口translate本身可以表示翻译的意思，在物理上也可以表示平移

        值个数
        口一个值时，设置x轴上的位移
        口二个值时，设置x轴和y轴上的位移

        值类型
        数字: 100px
        百分比: 参照元素本身
    口缩放: scale(x, y)
    口旋转: rotate(deg)
    口 倾斜: skew(deg,deg)




    补充:
    补充一: translate是translateX和translateY函数的简写
            口translate3d后续了解
    补充二: translate的百分比可以完成一个元素的水平和垂直居中:
    */
    .container{
        display: inline-block;
        border: 5px solid #f00;
    }
    .container .box {
       width: 200px;
       height: 100px;
       background-color: orange; 
       /* translate  */
       /* transform: translate(100px,100px); */
       /* 不同地方的百分比相对参照物是不一样的 */
       /* translate的百分比是相对于自身的 */
       /* 如果设置的是x的位移: 那么参考的是自身的宽度 */
       /* 如果设置的是y的位移: 那么参考的是自身的高度 */
       /* transform: translate(100%,100%); */


        /* scale 
        缩放: scale(x,y)
        口 scale0 CSS 函数可改变元案的大小个
        口 一个值时，设置x轴上的缩放
        口 二个值时，设置x轴和y轴上的缩放
        值类型:
        口 数字:
        √ 1: 保持不变
        √ 2: 放大一倍
        √ 0.5: 缩小一半
        口 百分比: 支持百分比(不常用)
            百分比是相对于自身的
            0~1 对元素进行缩小
            大于1 对元素进行放大
        */
       transform: scale(0.6,0.6);

       /* 
       旋转: rotate(<angle>)  
        值个数
        口 一个值时，表示旋转的角度
        值类型:
        口常用单位deg:旋转的角度degrees
        口正数为顺时针
        口负数为逆时针
       */
/*  补充一:rotate函数是rotatez函数的简写写法
    补充二: rotate的其他单位
        口事实上rotate支持的单位是很多的;
        口度(degrees)、百分度 (gradians) 、弧度(radians) 或圈数 (turns) */
    }
    .box:hover{
       /* transform: scale(0.7,0.7); */
       transform: rotate(-45deg);
    }
</style>
<body>
    
    <div class="container">
        <div class="box">

        </div>
    </div>

</body>
</html>